<template>
  <div class="chart-ani-box">
    <div class="chart-box" id="chartMain"></div>
    <ul v-if="pageIndex === 5" class="pie-time-info">
      <li>
        <span>凌晨</span>
        <i>0-4点</i>
      </li>
      <li>
        <span>上午</span>
        <i>4-10点</i>
      </li>
      <li>
        <span>中午</span>
        <i>10-14点</i>
      </li>
      <li>
        <span>下午</span>
        <i>14-18点</i>
      </li>
      <li>
        <span>晚上</span>
        <i>18-24点</i>
      </li>
    </ul>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'ChartAni',
  props: ['pageIndex', 'reportData'],
  data () {
    return {
      myChart: null,
      pieColor: ['#2d3a27', '#6db93a', '#5a9036', '#48653c', '#2d3a28'],
      rem: getComputedStyle(document.getElementsByTagName('html')[0]).fontSize.replace(/px/, '')
    }
  },
  watch: {
    pageIndex: {
      immediate: true,
      handler (val) {
        this.$nextTick(() => {
          if (val === 4) {
            this.initBar()
          } else if (val === 5) {
            this.initPieBase()
            setTimeout(() => {
              this.initPie()
            }, 1000)
          } else if (val === 7) {
            this.initRadar()
          } else if (val === 8) {
            this.initRankBase()
            setTimeout(() => {
              this.initRank()
            }, 1000)
          } else {
            this.initBar()
          }
        })
      }
    }
  },
  methods: {
    initBar () {
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById('chartMain'))
      }
      let list = []
      if (this.reportData) {
        const d = JSON.parse(this.reportData.data3)
        list = d.monthBorrows || []
      }
      const xAxis = []
      const sData = []
      list.forEach(c => {
        xAxis.push(c.monthNum)
        sData.push({
          name: c.monthNum,
          value: c.borrowNum
        })
      })
      const option = {
        title: {
          text: '单位：册次',
          textStyle: {
            fontSize: 0.32 * this.rem,
            fontWeight: 'normal',
            color: '#333'
          },
          top: '3.4%',
          right: '4.6%'
        },
        grid: {
          left: '4%',
          right: '4%',
          top: '15%',
          bottom: '6%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxis,
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            fontSize: 0.3 * this.rem,
            color: '#333333',
            margin: 0.2 * this.rem
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            show: false
          },
          splitNumber: 4
        },
        series: [
          {
            id: 'month',
            dataGroupId: 'month',
            data: sData,
            type: 'bar',
            barWidth: 0.46 * this.rem,
            label: {
              show: true,
              color: '#427189',
              fontSize: 0.3 * this.rem,
              fontWeight: 'bolder',
              position: 'top'
            },
            itemStyle: {
              borderRadius: 25,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#6bb3d8' },
                { offset: 1, color: '#d1e7f3' }
              ])
            }
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    initPieBase () {
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById('chartMain'))
      }
      const option = {
        series: [
          {
            type: 'pie',
            radius: ['30%', '43%'],
            data: [
              { value: 100, name: '圆圈', groupId: 'month' }
            ],
            itemStyle: {
              borderRadius: ['20%', '20%', 0, 0],
              borderWidth: 8,
              borderColor: '#fff'
            },
            label: {
              show: false
            },
            color: [this.pieColor[2]],
            universalTransition: {
              enabled: true,
              seriesKey: ['month'],
              delay: function (index, count) {
                return Math.random() * 200
              }
            }
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    initPie () {
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById('chartMain'))
      }
      let list = []
      if (this.reportData) {
        const d = JSON.parse(this.reportData.data6)
        list = d.hourBorrows || []
      }
      const color = this.pieColor
      const sData = []
      list.forEach((c, i) => {
        const obj = {
          name: `${c.hourNum}时`,
          value: c.borrowNum
        }
        const item = {
          borderRadius: [0, 0, '20%', '20%'],
          borderWidth: 8,
          borderColor: '#fff'
        }
        if (i >= 0 && i < 4) {
          obj.itemStyle = {
            ...item,
            color: color[0]
          }
        } else if (i >= 4 && i < 10) {
          obj.itemStyle = {
            ...item,
            color: color[1]
          }
        } else if (i >= 10 && i < 14) {
          obj.itemStyle = {
            ...item,
            color: color[2]
          }
        } else if (i >= 14 && i < 18) {
          obj.itemStyle = {
            ...item,
            color: color[3]
          }
        } else if (i >= 18 && i < 24) {
          obj.itemStyle = {
            ...item,
            color: color[4]
          }
        }
        sData.push(obj)
      })
      const option = {
        series: [
          {
            type: 'pie',
            radius: ['30%', '43%'],
            data: [
              { value: 4, name: '凌晨' },
              { value: 6, name: '上午' },
              { value: 4, name: '中午' },
              { value: 4, name: '下午' },
              { value: 6, name: '晚上' }
            ],
            itemStyle: {
              borderRadius: ['20%', '20%', 0, 0],
              borderWidth: 8,
              borderColor: '#fff'
            },
            label: {
              show: false
            },
            color: color,
            universalTransition: true
          },
          {
            type: 'pie',
            radius: ['43%', '85%'],
            roseType: 'area',
            data: sData,
            label: {
              show: false
            },
            animationType: 'scale'
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    initRadar () {
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById('chartMain'))
      }
      let list = []
      if (this.reportData) {
        const d = JSON.parse(this.reportData.data7)
        list = d.borrowTypes.sort((a, b) => {
          return b.borrowNum - a.borrowNum
        }).slice(0, 6)
      }
      const data = list.map(c => {
        return {
          name: c.callName,
          value: c.borrowNum
        }
      })
      const sData = []
      const sObj = {}
      data.forEach(c => {
        sData.push(c.value)
        sObj[c.name] = c.value
      })
      const max = Math.max.apply(null, sData)
      const indicator = []
      const bgData = []
      data.forEach(c => {
        indicator.push({
          name: c.name,
          max: max
        })
        bgData.push(max)
      })
      const option = {
        title: {
          text: '单位：册次',
          textStyle: {
            fontSize: 0.32 * this.rem,
            fontWeight: 'bolder',
            color: '#333'
          },
          top: '3.4%',
          right: '4.6%'
        },
        radar: {
          indicator: indicator,
          radius: '50%',
          splitNumber: 4,
          splitArea: {
            show: false
          },
          axisName: {
            formatter: function (value) {
              return `{text|${value}}\n{num|${sObj[value]}}`
            },
            rich: {
              text: {
                fontSize: 0.35 * this.rem,
                color: '#555'
              },
              num: {
                fontSize: 0.39 * this.rem,
                lineHeight: 0.6 * this.rem,
                color: '#634d84',
                align: 'center'
              }
            }
          },
          axisLine: {
            lineStyle: {
              color: '#e8ebf7',
              width: 0.06 * this.rem,
              type: 'dashed'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#e8ebf7',
              width: 0.06 * this.rem,
              type: 'dashed'
            }
          }
        },
        series: [
          {
            name: '年度阅读偏好',
            type: 'radar',
            id: 'month',
            dataGroupId: 'month',
            data: [
              {
                value: sData,
                name: '分类',
                lineStyle: {
                  opacity: 0
                },
                itemStyle: {
                  opacity: 0
                },
                areaStyle: {
                  color: '#7f95ff',
                  opacity: 0.5
                }
              },
              {
                value: bgData,
                name: '背景',
                lineStyle: {
                  width: 0.084 * this.rem,
                  color: '#e8ebf7'
                },
                itemStyle: {
                  opacity: 0
                }
              }
            ]
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    initRankBase () {
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById('chartMain'))
      }
      let list = []
      if (this.reportData) {
        const d = JSON.parse(this.reportData.data9)
        list = d.rankList || []
        list.reverse()
      }
      let me = 0
      const data = list.map((c, i) => {
        if (c.state === 1) {
          me = i
        }
        return {
          name: `第${c.rankNum}名`,
          value: c.borrowNum
        }
      })
      const option = {
        grid: {
          left: '8%',
          right: '8%',
          top: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: [data[me].name],
          axisLabel: {
            show: true,
            fontSize: 0.32 * this.rem,
            color: '#498f60',
            lineHeight: 0.52 * this.rem,
            formatter: function (value, index) {
              return `${value}\n阅读量\n${data[me].value}册次`
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          }
        },
        series: [
          {
            type: 'bar',
            data: [
              {
                ...data[me],
                groupId: 'month'
              }
            ],
            barWidth: 2.04 * this.rem,
            itemStyle: {
              borderRadius: [0.19 * this.rem, 0.19 * this.rem, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(141, 211, 164, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(141, 211, 164, 0)'
                }
              ])
            },
            universalTransition: {
              enabled: true,
              seriesKey: ['month'],
              delay: function (index, count) {
                return Math.random() * 200
              }
            }
          }
        ]
      }
      this.myChart.setOption(option, true)
    },
    initRank () {
      if (!this.myChart) {
        this.myChart = echarts.init(document.getElementById('chartMain'))
      }
      let list = []
      if (this.reportData) {
        const d = JSON.parse(this.reportData.data9)
        list = d.rankList || []
        list.reverse()
      }
      let me = 0
      const data = list.map((c, i) => {
        if (c.state === 1) {
          me = i
        }
        return {
          name: `第${c.rankNum}名`,
          value: c.borrowNum
        }
      })
      const xData = []
      data.forEach(c => {
        xData.push(c.name)
      })
      const option = {
        grid: {
          left: '8%',
          right: '8%',
          top: me === 2 ? '26%' : '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xData,
          axisLabel: {
            show: true,
            fontSize: 0.32 * this.rem,
            color: '#498f60',
            lineHeight: 0.52 * this.rem,
            formatter: function (value, index) {
              return `${value}\n阅读量\n${data[index].value}册次`
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          }
        },
        yAxis: {
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          min: data[0].value - 1
        },
        series: [
          {
            type: 'bar',
            data: data,
            barWidth: 2.04 * this.rem,
            markPoint: {
              data: [
                {
                  name: '我的',
                  coord: [data[me].name, data[me].value]
                }
              ],
              symbol: 'image://',
              symbolSize: [1.67 * this.rem, 2.04 * this.rem],
              symbolOffset: [0, '-52%']
            },
            itemStyle: {
              borderRadius: [0.19 * this.rem, 0.19 * this.rem, 0, 0],
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(141, 211, 164, 1)'
                },
                {
                  offset: 1,
                  color: 'rgba(141, 211, 164, 0)'
                }
              ])
            }
          }
        ]
      }
      this.myChart.setOption(option, true)
    }
  }
}
</script>
<style lang="scss" scoped>
.chart-ani-box {
  width: 1000px;
  height: 1000px;
  background: #fff;
  border-radius: 30px;
  margin: 80px 0 264px 0;
  position: absolute;
  left: calc(50% - 500px);
  top: calc(50% - 580px);
  z-index: 9;
  .chart-box {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
.pie-time-info {
  font-size: 32px;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  animation: MoveOpacity 0.6s ease-in-out 1 1s both;
  li {
    white-space: nowrap;
    position: absolute;
    display: flex;
    flex-direction: column;
    text-align: center;
    &:nth-child(1) {
      transform: rotate(36deg);
      left: 41px;
      top: -181px;
      i {
        color: #2d3a27;
        margin-top: 20px;
      }
    }
    &:nth-child(2) {
      transform: rotate(113deg);
      left: 88px;
      top: -5px;
      i {
        color: #6db93a;
        margin-top: 20px;
        transform: rotate(180deg);
      }
      span {
        transform: rotate(180deg);
      }
    }
    &:nth-child(3) {
      left: -55px;
      top: 94px;
      flex-direction: column-reverse;
      i {
        color: #5a9036;
        margin-bottom: 20px;
      }
    }
    &:nth-child(4) {
      transform: rotate(58deg);
      left: -190px;
      top: 19px;
      flex-direction: column-reverse;
      i {
        color: #48653c;
        margin-bottom: 20px;
      }
    }
    &:nth-child(5) {
      transform: rotate(-49deg);
      left: -172px;
      top: -158px;
      i {
        color: #2d3a28;
        margin-top: 20px;
      }
    }
  }
}
</style>
